/**
* 团队管理
*/
import React, { Component } from 'react';
import { View, StyleSheet, Text, Image, TouchableOpacity, FlatList, ImageBackground } from "react-native";
import { connect } from 'react-redux';
import { create_service } from '../../redux/index.js';
import { Contract } from '../../service/index.js';
import { Colors, Dimens, ImageRes } from '../../utils/Assets';
import { ProgressView } from '../custom/index'
import { Actions } from 'react-native-router-flux';
import { getStore } from '../../redux/index.js';
class TeamRankListView extends Component {

    constructor(props) {
        super(props);
        this.state = {
            loading: false,
            list_type: 'trade',
            rank_list: []
        }
        this.firstData = null
        this.secondData = null
        this.thirdData = null
        this.rank_list = []
        this.userInfo = getStore().getState().auth.userInfo
    }

    componentDidMount() {
        this.getRankList()
    }
    getRankList() {
        let params = {
            token: this.userInfo.token,
            type: this.state.list_type
        }
        this.setState({ loading: true })
        this.props.dispatch(create_service(Contract.POST_USER_RANK, params)).then((res) => {
            if (res && res.length > 0) {
                if (res.length == 1) {
                    this.firstData = res[0]
                    this.secondData = null
                    this.thirdData = null
                    this.rank_list = []
                } else if (res.length == 2) {
                    this.firstData = res[0]
                    this.secondData = res[1]
                    this.thirdData = null
                    this.rank_list = []
                } else if (res.length == 3) {
                    this.firstData = res[0]
                    this.secondData = res[1]
                    this.thirdData = res[2]
                    this.rank_list = []
                } else {
                    this.firstData = res[0]
                    this.secondData = res[1]
                    this.thirdData = res[2]
                    this.rank_list = res.slice(3)
                }
            }
            this.setState({ loading: false })
        })
    }
    componentWillUnmount() {
    }
    renderItem({ item, index }) {
        return (
            <TouchableOpacity style={{ backgroundColor: "#ffffff", padding: 15, flexDirection: 'row', justifyContent: 'space-between', borderRadius: 8, marginTop: 15, }} activeOpacity={0.8} onPress={() => {
                Actions.teamManagerView({ title: item.real_name, users_id: item.id, mobile: item.mobile })
            }}>
                <View style={{ flexDirection: 'row' }}>
                    <Text style={{ fontSize: 15, color: "#333333", alignSelf: 'center', fontWeight: 'bold' }}>{index + 4}</Text>
                    <View style={{ flexDirection: 'row', marginLeft: 15 }}>
                        <Image source={{ uri: item.avatar }} style={{ width: 50, height: 50, alignSelf: 'center', borderRadius: 25 }}></Image>
                        <Text style={{ fontSize: 15, color: "#333333", alignSelf: 'center', marginLeft: 15 }}>{item.real_name}</Text>
                    </View>
                </View>
                <View style={{ flexDirection: 'row' }}>
                    <Text style={{ fontSize: 15, color: "#333333", alignSelf: 'center', fontWeight: 'bold' }}>
                        {this.state.list_type == 'trade' ? "￥" + item.consume_trade_amount : item.user_number + '人'}
                    </Text>
                    <Image source={ImageRes.team_right_arrow} style={{ width: 10, height: 16, alignSelf: 'center', marginLeft: 15 }}></Image>
                </View>
            </TouchableOpacity>
        )
    }
    renderHeader() {
        return (
            <ImageBackground source={ImageRes.team_rank_head} style={styles.header} >
                <View style={{ height: 44, flexDirection: 'row' }}>
                    <View style={{ flex: 0.2 }}>
                        <TouchableOpacity style={{ marginLeft: 15, justifyContent: 'center', flex: 1 }} activeOpacity={0.8} onPress={() => {
                            Actions.pop()
                        }}>
                            <Image source={ImageRes.team_back} style={{ width: 20, height: 20 }}></Image>
                        </TouchableOpacity>
                    </View>
                    <View style={{ flex: 0.6, justifyContent: 'center' }}>
                        <Text style={{ fontSize: 16, color: "#ffffff", alignSelf: 'center', fontWeight: 'bold' }}>
                            {this.state.list_type == 'trade' ? '交易排行榜' : '团队数据排行榜'}
                        </Text>
                    </View>
                    <View style={{ flex: 0.2 }}>
                        <TouchableOpacity style={{ flex: 1, justifyContent: 'center' }} activeOpacity={0.8} onPress={() => {
                            this.setState({ list_type: this.state.list_type == 'trade' ? 'user' : 'trade' }, () => {
                                this.firstData = null
                                this.secondData = null
                                this.thirdData = null
                                this.rank_list = []
                                this.getRankList()
                            })
                        }}>
                            <Image source={ImageRes.team_exachange} style={{ width: 22, height: 18, alignSelf: 'flex-end', marginRight: 15 }}></Image>
                        </TouchableOpacity>
                    </View>
                </View>
                <View style={{ flex: 1, justifyContent: 'space-between' }}>
                    <View style={{ flexDirection: 'row' }}>
                        {this.secondData && <TouchableOpacity style={{ flex: 1, marginTop: 40 }} activeOpacity={0.8} onPress={() => {
                            Actions.teamManagerView({ title: this.secondData.real_name, users_id: this.secondData.id, mobile: this.secondData.mobile })
                        }}>
                            <Image source={{ uri: this.secondData.avatar }} style={{ width: 60, height: 60, alignSelf: 'center', borderWidth: 2, borderColor: "#DADADA", borderRadius: 30 }}></Image>
                            <View style={{ backgroundColor: "#DADADA", width: 20, height: 20, borderRadius: 10, justifyContent: 'center', marginTop: -10, alignSelf: 'center' }}>
                                <Text style={{ fontSize: 13, color: "#333333", alignSelf: 'center' }}>2</Text>
                            </View>
                            <Text style={{ fontSize: 15, color: "#ffffff", alignSelf: 'center', marginTop: 15 }}>{this.secondData.nick_name}</Text>
                        </TouchableOpacity>}
                        {this.firstData && <TouchableOpacity style={{ flex: 1 }} activeOpacity={0.8} onPress={() => {
                            Actions.teamManagerView({ title: this.firstData.real_name, users_id: this.firstData.id, mobile: this.firstData.mobile })
                        }}>
                            <Image source={ImageRes.team_crown} style={{ width: 28, height: 18, alignSelf: 'center' }}></Image>
                            <Image source={{ uri: this.firstData.avatar }} style={{ width: 60, height: 60, alignSelf: 'center', borderWidth: 2, borderColor: "#FFF700", borderRadius: 30 }}></Image>
                            <View style={{ backgroundColor: "#FFF700", width: 20, height: 20, borderRadius: 10, justifyContent: 'center', marginTop: -10, alignSelf: 'center' }}>
                                <Text style={{ fontSize: 13, color: "#333333", alignSelf: 'center' }}>1</Text>
                            </View>
                            <Text style={{ fontSize: 15, color: "#ffffff", alignSelf: 'center', marginTop: 15 }}>{this.firstData.nick_name}</Text>
                        </TouchableOpacity>}
                        {this.thirdData && <TouchableOpacity style={{ flex: 1, marginTop: 40 }} activeOpacity={0.8} onPress={() => {
                            Actions.teamManagerView({ title: this.thirdData.real_name, users_id: this.thirdData.id, mobile: this.thirdData.mobile })
                        }}>
                            <Image source={{ uri: this.thirdData.avatar }} style={{ width: 60, height: 60, alignSelf: 'center', borderWidth: 2, borderColor: "#FFAA55", borderRadius: 30 }}></Image>
                            <View style={{ backgroundColor: "#FFAA55", width: 20, height: 20, borderRadius: 10, justifyContent: 'center', marginTop: -10, alignSelf: 'center' }}>
                                <Text style={{ fontSize: 13, color: "#333333", alignSelf: 'center' }}>0</Text>
                            </View>
                            <Text style={{ fontSize: 15, color: "#ffffff", alignSelf: 'center', marginTop: 15 }}>{this.thirdData.nick_name}</Text>
                        </TouchableOpacity>}
                    </View>
                    <View style={{ flexDirection: 'row', justifyContent: 'center' }}>
                        <ImageBackground style={{ width: 0.3 * (Dimens.DeviceWidth - 30), height: 0.33 * (Dimens.DeviceWidth - 30), alignSelf: 'flex-end', justifyContent: 'center' }} source={ImageRes.team_rank_one}>
                            {this.secondData ? <View style={{ flex: 1, justifyContent: 'center' }}>
                                <Text style={{ fontSize: 18, color: "#ffffff", alignSelf: 'center', fontWeight: 'bold' }}>
                                    {this.state.list_type == 'trade' ? this.secondData.consume_trade_amount : this.secondData.user_number}
                                </Text>
                                <Text style={{ fontSize: 15, color: "#ffffff", alignSelf: 'center', marginTop: 5 }}>
                                    {this.state.list_type == 'trade' ? '交易额' : ''}
                                </Text>
                            </View> : <View style={{ flex: 1, justifyContent: 'center' }}>
                                    <Text style={{ fontSize: 20, color: "#ffffff", alignSelf: 'center', fontWeight: 'bold' }}>0</Text>
                                </View>}
                        </ImageBackground>
                        <ImageBackground style={{ width: 0.4 * (Dimens.DeviceWidth - 30), height: 0.38 * (Dimens.DeviceWidth - 30), alignSelf: 'flex-end', justifyContent: 'center' }} source={ImageRes.team_rank_two}>
                            {this.firstData ? <View style={{ flex: 1, justifyContent: 'center' }}>
                                <Text style={{ fontSize: 18, color: "#ffffff", alignSelf: 'center', fontWeight: 'bold' }}>
                                    {this.state.list_type == 'trade' ? this.firstData.consume_trade_amount : this.firstData.user_number}
                                </Text>
                                <Text style={{ fontSize: 15, color: "#ffffff", alignSelf: 'center', marginTop: 5 }}>
                                    {this.state.list_type == 'trade' ? '交易额' : ''}
                                </Text>
                            </View> : <View style={{ flex: 1, justifyContent: 'center' }}>
                                    <Text style={{ fontSize: 25, color: "#ffffff", alignSelf: 'center', fontWeight: 'bold' }}>0</Text>
                                </View>}
                        </ImageBackground>
                        <ImageBackground style={{ width: 0.3 * (Dimens.DeviceWidth - 30), height: 0.3 * (Dimens.DeviceWidth - 30), alignSelf: 'flex-end', justifyContent: 'center' }} source={ImageRes.team_rank_three}>
                            {this.thirdData ? <View style={{ flex: 1, justifyContent: 'center' }}>
                                <Text style={{ fontSize: 18, color: "#ffffff", alignSelf: 'center', fontWeight: 'bold' }}>
                                    {this.state.list_type == 'trade' ? this.thirdData.consume_trade_amount : this.thirdData.user_number}
                                </Text>
                                <Text style={{ fontSize: 15, color: "#ffffff", alignSelf: 'center', marginTop: 5 }}>
                                    {this.state.list_type == 'trade' ? '交易额' : ''}
                                </Text>
                            </View> : <View style={{ flex: 1, justifyContent: 'center' }}>
                                    <Text style={{ fontSize: 30, color: "#ffffff", alignSelf: 'center', fontWeight: 'bold' }}>0</Text>
                                </View>}
                        </ImageBackground>
                    </View>
                </View>
            </ImageBackground>
        )
    }
    render() {
        return (
            <View style={styles.container}>
                {this.renderHeader()}
                <View style={{ flex: 1, backgroundColor: "#ffffff" }}>
                    <FlatList
                        ref={(list) => (this.flatList = list)}
                        keyExtractor={(item, index) => index.toString()}
                        data={this.rank_list}
                        ItemSeparatorComponent={() => <View style={{ backgroundColor: Colors.bg_color, height: 1 }} />}
                        showsVerticalScrollIndicator={false}
                        renderItem={this.renderItem.bind(this)}
                    />
                </View>
                <ProgressView show={this.state.loading} />
            </View>
        )
    }
}
const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: Colors.bg_color,
    },
    header: {
        paddingTop: Dimens.StatusBarHeight,
        width: Dimens.DeviceWidth,
        height: Dimens.DeviceWidth * 0.95,
        justifyContent: 'center'
    }
});
const ExportView = connect()(TeamRankListView);
module.exports.TeamRankListView = ExportView
